<template>
  <div class="echarts">
    <!-- <img
      src="https://image.hezongyy.com/pcimage/20211109img/mapborder.png"
      alt=""
      class="mapbd"
    /> -->
    <div
      :style="{ height: '800px', width: '800px' }"
      ref="myEchart"
      class="myEchart"
    ></div>
    <router-link to='/sichuanTest'>四川</router-link>
  </div>
</template>
<script>
import * as echarts from "echarts";
import JSON from "../assets/SC.json"; // 引入杭州市地图数据(引入方式重点，本人用其他方式报错)
// import '../../node_modules/echarts-china-cities-js'
export default {
  name: "echarts",
  data() {
    return {};
  },
  mounted() {
    this.drawSCMap();
  },
  methods: {
    // 绘制四川地图
    drawSCMap() {
      let myChart = this.echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      this.echarts.registerMap("四川", JSON); //#2
      let option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        //鼠标移入时显示的内容
        tooltip: {
          show: true, //鼠标移入是否触发数据
          trigger: "item",
          formatter: "{b}<br/>{c} (p / km2)",
        },
        //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
        visualMap: {
          min: 0, //最小值
          max: 600, //最大值
          calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
          inRange: {
            color: ["#fb714c", "#70b4f4", "#70e4f4", "#f09640", "#f9d9bb"], //颜色
          },
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            zoom: 1.1,
            name: "四川地图",
            type: "map", //图标类型
            mapType: "四川", // 自定义扩展图表类型
            //图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            itemStyle: {
              normal: {
                //默认样式
                label: {
                  show: true,
                },
                borderType: "solid", //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
                borderColor: "rgba(255,215,0,0.4)", //设置图形边框为淡金色,透明度为0.4
                borderWidth: 1, //图形的描边线宽。为 0 时无描边。
                opacity: 1,
                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              },
              emphasis: {
                //高亮状态
              },
            },
            //关系边的公用线条样式。
            lineStyle: {
              normal: {
                color: "rgba(255,0,255,0.4)",
                width: "3",
                type: "dotted", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                curveness: 0.3, //线条的曲线程度，从0到1
                opacity: 1,
                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              },
              emphasis: {
                //高亮状态
              },
            },
            //图形上的文本标签
            label: {
              normal: {
                show: true, //是否显示标签。
                position: "inside", //标签的位置。['50%', '50%'] [x,y]
                textStyle: {
                  //标签的字体样式
                  color: "#cde6c7", //字体颜色
                  fontStyle: "normal", //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                  fontWeight: "bolder", //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                  fontFamily: "sans-serif", //文字的字体系列
                  fontSize: 12, //字体大小
                },
              },
              emphasis: {
                //高亮状态
              },
            },
            //线条的边缘标签
            edgeLabel: {
              normal: {
                show: false,
              },
              emphasis: {
                //高亮状态
              },
            },
            data: [{ name: "成都市", value: 100 }], //鼠标移入时的值，对应trigger的item
            // nameMap: {'成都市': '成都'}//#5
          },
          {
            type: "scatter",
            showEffectOn: "render", //配置什么时候显示特效
            coordinateSystem: "geo", //该系列使用的坐标系
            symbolSize: 10, //标记的大小
            // data:[
            //   {name: '宜昌', value: [111.3,30.7,130]},
            // ],
            zlevel: 99999,
          },
        ],
      };
      myChart.setOption(option);
    },
    resetData(data, type) {
      // data代表返回的数据
      // type为1，流入；type为2 流出。
      let result = {
        totalType: "", //总的为流入还是流出
        falseTotalType: "", //totalType为lr，则falseTotalType为lc；反之为lr
        linesData: [],
        effectScatterData: [],
      };
      if (type == 1) {
        result.totalType = "lr";
        result.falseTotalType = "lc";
      } else {
        result.totalType = "lc";
        result.falseTotalType = "lr";
      }
      data.forEach((item, index) => {
        result.effectScatterData.push({
          type: result.totalType,
          i: index + 1,
          traffiFlow: item.tollStationCount,
          name: item.tollStationName,
          value: [item.startLng, item.startLat],
        });
        item.list.forEach((el, i) => {
          if (i < 3) {
            //由于只需要显示前三名的地点，所以取前三个就可以
            if (type == 1) {
              //判断是流入图还是流出图，1为流入
              result.linesData.push({
                fromName: el.fromToTollStationName, //开始地点name
                toName: item.tollStationName, //目的地地点name
                coords: [
                  [el.startLng, el.startLat], //开始地点的坐标
                  [item.startLng, item.startLat], //目的地的坐标
                ],
              });
            } else {
              //流出的话，就调换开始和结束的位置即可
              result.linesData.push({
                fromName: item.tollStationName,
                toName: el.fromToTollStationName,
                coords: [
                  [item.startLng, item.startLat],
                  [el.startLng, el.startLat],
                ],
              });
            }
            result.effectScatterData.push({
              //这里就是把所有的要标注的位置给集合一下，不管是流入还是流出
              type: result.falseTotalType,
              i: i + 1,
              traffiFlow: el.trafficFlow,
              name: el.fromToTollStationName,
              value: [el.startLng, el.startLat],
            });
          }
        });
      });
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
.echarts {
  // color: #f9d9bb;
  // width: 1980px;
  position: relative;
  .mapbd {
    position: absolute;
    left: 50px;
  }
  .myEchart {
    transform:rotateX(30deg)
    // transform: scale(1.8);
    // background: url('https://image.hezongyy.com/pcimage/20211109img/mapborder.png') no-repeat;
  }
}
</style>
  
